@import 'src/styles/shared/colors.scss';

:local {
	.Button.Button.Button {
		// hack for higher specificity (needed for LinkButton and RouterLinkButton)
		display: inline-flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		font-family: 'Avenir Next', sans-serif;
		font-weight: 600;
		text-decoration: none;
		text-align: center;
		line-height: 1.2;

		border-radius: 5px;
		background-color: gray;
		border: 1px solid gray;
		color: black;
		font-size: 16px;
		cursor: pointer;

		&:focus {
			outline: none;
			box-shadow: 0px 0px 0px 2px color(digitalBlue70);
		}

		// sizing ------------------------------------

		padding: 10px 18px;
		&[data-icon-padding='true'] {
			padding: 10px 15px;
		}

		&[data-size='small'] {
			padding: 6px 12px;
			&[data-icon-padding='true'] {
				padding: 6px 10px;
			}
		}

		&[data-size='large'] {
			padding: 12px 22px;
			&[data-icon-padding='true'] {
				padding: 12px 18px;
			}
			font-size: 18px;
		}

		// variants ------------------------------------

		&[data-variant='blue'] {
			background-color: color(digitalBlue80);
			border-color: color(digitalBlue80);
			color: white;

			&:hover {
				background-color: color(digitalBlue90);
				border-color: color(digitalBlue90);
			}

			&:active {
				background-color: color(prussian90);
				border-color: color(prussian90);
			}
		}

		&[data-variant='dark'] {
			background-color: color(prussian80);
			border-color: color(prussian80);

			color: white;

			&:hover {
				background-color: color(prussian90);
				border-color: color(prussian90);
			}

			&:active {
				background-color: color(prussian90);
				border-color: color(prussian90);
			}
		}

		&[data-variant='green'] {
			background-color: color(landGreen80);
			border-color: color(landGreen80);
			color: white;

			&:hover {
				background-color: color(landGreen90);
				border-color: color(landGreen90);
			}

			&:active {
				background-color: color(landGreen90);
				border-color: color(landGreen90);
			}
		}

		&[data-variant='red'] {
			background-color: color(coral80);
			border-color: color(coral80);
			color: white;

			&:hover {
				background-color: color(coral90);
				border-color: color(coral90);
			}

			&:active {
				background-color: color(coral90);
				border-color: color(coral90);
			}
		}

		&[data-variant='pink'] {
			background-color: color(pink80);
			border-color: color(pink80);
			color: white;

			&:hover {
				background-color: color(pink90);
				border-color: color(pink90);
			}

			&:active {
				background-color: color(pink90);
				border-color: color(pink90);
			}
		}

		&[data-variant='subtle'] {
			background-color: color(white);
			color: color(digitalBlue80);
			border: 1px solid color(digitalBlue80);
			font-weight: 400;

			&:hover {
				background-color: color(digitalBlue20);
			}

			&:active {
				background-color: color(digitalBlue20);
			}
		}

		&[data-variant='text'] {
			background-color: transparent;
			color: color(prussian80);
			border: 1px solid transparent;
			font-weight: 400;

			&:hover {
				background-color: color(digitalBlue20);
			}

			&:active {
				background-color: color(digitalBlue20);
			}
		}
		&[data-variant='text'][disabled] {
			color: color(slateGrey40);
			cursor: default;

			&:hover {
				background-color: transparent;
			}

			&:active {
				background-color: transparent;
			}
		}

		// various modifiers ---------------------------

		&[data-fullwidth] {
			width: 100%;
		}

		&[disabled]:not([data-variant='text']) {
			background-color: color(slateGrey40);
			border-color: color(slateGrey40);

			color: color(white);
			border: 1px solid color(slateGrey40);

			cursor: default;

			&:hover {
				background-color: color(slateGrey40);
				border-color: color(slateGrey40);
			}

			&:active {
				background-color: color(slateGrey40);
				border-color: color(slateGrey40);
			}
		}
	}
}
